<template>
    <div class="newtitle">
        <div class="title">
            <span>MMapp</span>
        </div>
        <div class="addfriend" @click="addfriend">
            <span class="iconfont">&#xe726;</span>
        </div>
        <div class="add" v-show="addf">
            <div @click="findfriend">找朋友</div>
            <div>找群</div>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  name: 'Newtitle',
  setup() {
    const addf = ref(false);
    const router = useRouter();
    function addfriend() {
      addf.value = !addf.value;
    }
    function findfriend() {
      router.push('/searchview');
    }
    return {
      addfriend,
      addf,
      findfriend,
    };
  },
};
</script>

<style scoped>
    .newtitle {
        display: flex;
        height: 50px;
        line-height: 50px;
        background-color: #ffffff;
    }

    .title {
        flex: 9;
    }

    .title span {
        font-size: 17px;
        font-weight: 700;
        color: #000000;
    }

    .addfriend {
        flex: 1;
    }

    .addfriend span {
        font-size: 30px;
        font-weight: 700;
    }
    .add{
        position: absolute;
        top: 50px;
        right:5px;
        width: 80px;
        height: 100px;
        background-color: #6c6c6c;
        color: #ffffff;
        border-radius: 5px;
    }
    .add::before{
        content: '';
        position: absolute;
        top: -9px;
        right: 5px;
        width: 0px;
        height: 0px;
        border: 10px solid #6c6c6c;
        border-top: none;
        border-right-color: transparent;
        border-left-color: transparent;
    }
</style>
